import React, { Component } from "react";
import MainLayout from "@/component/mainLayout/mainLayout";
import Banner from "@/views/viewCommon/Banner";
import yhTools from "@tools/yh";
import { Toast } from "antd-mobile";
import { InterfaceG } from "@/config/Config";

import iconCoffee from "@images/ic_coffee01.png";
import footerLogo from "@images/xhf-logo.png"; // 底部logo
import "./index.scss";

class couponSending extends Component {
	constructor(props) {
		super(props);
		this.state = {
			status: "", //领券状态
			tipMsg: "", //领券提示文字
			bannerImgList: [] //底部banner
		};
		this.timer = null;
	}
	componentDidMount() {
		this.receiveCouponByFunctionNo();
		this.queryMeetCustomBanner();
		this.timer = setTimeout(() => {
			this.checkStatus();
		}, 3000);
	}
	componentWillUnmount() {
		clearTimeout(this.timer);
		this.timer = null;
	}

	/**查询领取状态 */
	receiveCouponByFunctionNo() {
		let obj = {
			url: InterfaceG.receiveCouponByFunctionNo,
			params: {
				functionNo: "ACTIVITY_RECEIVE_COUPON"
			}
		};
		yhTools.request(obj).then(res => {
			if (res.code == "0") {
				const { status, message } = res.data;
				this.setState({
					status,
					tipMsg: message
				});
			} else {
				Toast.info(res.message, 2, () => {
					this.props.history.goBack();
				});
			}
		});
	}

	/**
	 * @msg: 查询满足自定义banner
	 * @param {*}
	 * @return {*}
	 */
	queryMeetCustomBanner() {
		const params = {
			url: InterfaceG.customBanner_queryMeetCustomBanner,
			params: {
				productCode: "601",
				sourceCode: "popup_pay_preferential"
			}
		};
		yhTools.request(params).then(res => {
			if (res.code === "0") {
				const { data } = res;
				data &&
					data.length > 0 &&
					data.map(v => {
						switch (v.positionCode) {
							case "popup_pay_preferential_middle":
								this.setState({
									bannerImgList: v.meetBannerImgRespList
								});
								break;
							default:
								break;
						}
					});
			} else {
				Toast.info(res.message, 2);
			}
		});
	}

	//倒计时后判断领券状态
	checkStatus() {
		const { status, tipMsg } = this.state;
		switch (status) {
			case 1: //领取成功
				Toast.info("领取成功，请前往我的优惠券页进行查看", 2, () => {
					this.props.history.goBack();
				});
				break;
			case 2: //已领取
				Toast.info("您已参与该活动", 2, () => {
					this.props.history.goBack();
				});
				break;
			case 3: //领取异常
			case 4: //无优惠券领取
				Toast.info(tipMsg, 2, () => {
					this.props.history.goBack();
				});
				break;
			default:
				this.props.history.goBack();
				break;
		}
	}

	bannerClick = () => {
		_yh.sa.track(_yh.sa.event.click_xhdbanner);
	};
	render() {
		const _pageParams = {
			header: {
				title: "跳转页",
				titleColor: "#232323",
				headerBackground: "#fff"
			},
			history: this.props.history,
			cacheLifecycles: this.props.cacheLifecycles
		};
		const { bannerImgList } = this.state;

		return (
			<MainLayout pageParams={_pageParams} isHiddenBack={true}>
				<div className="coupon-sending">
					<div className="content-wrap">
						<img className="title-img" src={iconCoffee} alt="" />
						<h2>
							优惠券派发中<span className="load-ani">...</span>
						</h2>
						<h3>
							本券为小辉付满减券，永辉生活APP下单付款时可使用领券后，可至“我的”-“支付优惠”-“领券中心”查看
						</h3>
					</div>
					<div className="bottom-wrap">
						<Banner
							onClick={this.bannerClick}
							bannerList={bannerImgList}
							history={this.props.history}
						/>

						<img className="logo" src={footerLogo} />
					</div>
				</div>
			</MainLayout>
		);
	}
}

export default couponSending;
